<template>
  <div class="all-operater-data">
    <!-- 
      0Z5j5jX550655m4： year 年份
      0Z5j5jX55jgKxGw： month 月份
      0Z5j5jX54tLmNHd   project 项目
      0Z5j5j1duz6ysHYu: yearTarget 年度目标营收
      0Z5j5jX57TEq6hL: businessIncome: 本月营业收入
      0Z5j5j1duDQWKDye:  businessIncomeTarget 月度营业收入指标
      0Z5j5j11IajrzKxu:  businessIncomeTotal 本年累计营业收入
      0Z5j5j1duBqhhCyK:  businessIncomeTotalIndex 年度营业收入指标
      0Z5j5jX58ptNgEv:  netProfit 本月净利润
      0Z5j5j1duErgytL4:  netProfitTarget 月度净利润指标
      0Z5j5j11Ib9QjzWq:  netProfitTotal 本年累计净利润
      0Z5j5j1duBLNCQtB  netProfitTotalIndex 年度净利润指标
      0Z5j5jX6IXe7YRp:  operatingRevenueProgress 营业收入节点进度
      0Z5j5j1dAEVHuN19: annualOperatingRevenueCompletionRate 年度营业收入完成率
      0Z5j5jX6KaAuGgn: netProfitProgress 净利润节点进度
      0Z5j5j1duIY38Cr2: netProfitGap 净利润差距
      0Z5j5j1dAGyHPkPd:  annualNetProfitCompletionRate 年度净利润完成率

      年份	月份	  目标累计进度	项目公司	 年度目标营收（可研口径）	        年度累计营收（可研口径）	 实际累计进度	                                年度目标净利润	          年度累计净利润	        实际累计进度
      year month              project    businessIncomeTotalIndex    businessIncomeTotal    annualOperatingRevenueCompletionRate    netProfitTotalIndex      netProfitTotal   annualNetProfitCompletionRate
     -->
     <el-table
      :data="tableData"
      :span-method="handleSpanMethod"
      border
      height="350"
      style="width: 100%">
      <el-table-column
        prop="year"
        label="年份"
        fixed
        >
      </el-table-column>
      <el-table-column
        prop="month"
        label="月份"
        fixed
        >
      </el-table-column>
      <el-table-column
        prop="total-progress"
        fixed
        width="110"
        label="目标累计进度">
        <template slot-scope="scope">
          {{ ((scope.row.month/12)*100).toFixed(2)  }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="project_name"
        label="项目公司">
      </el-table-column>
      <el-table-column
      width="200"
        label="年度目标营收（可研口径）">
        <template slot-scope="scope">
          {{ scope.row.businessIncomeTotalIndex.toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        label="年度累计营收（可研口径）">
        <template slot-scope="scope">
          {{ scope.row.businessIncomeTotal.toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column
        prop="annualOperatingRevenueCompletionRate"
        label="实际累计进度">
        <template slot-scope="scope">
          <span v-if="scope.row.project_name=='汇总'">
            {{ ((scope.row.businessIncomeTotal/scope.row.businessIncomeTotalIndex)*100).toFixed(2)  }}%
          </span>
          <span v-else>
            {{ scope.row.annualOperatingRevenueCompletionRate.toLocaleString() }}%
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="netProfitTotalIndex"
        width="130"
        label="年度目标净利润">
        <template slot-scope="scope">
          {{ scope.row.netProfitTotalIndex.toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column
        prop="netProfitTotal"
        width="130"
        label="年度累计净利润">
        <template slot-scope="scope">
          {{ scope.row.netProfitTotal.toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column
        prop="annualNetProfitCompletionRate"
        label="实际累计进度">
        <template slot-scope="scope">
          <span v-if="scope.row.project_name=='汇总'">
            {{ ((scope.row.netProfitTotal/scope.row.netProfitTotalIndex)*100).toFixed(2) }}%
          </span>
          <span v-else>
            {{ scope.row.annualNetProfitCompletionRate.toLocaleString() }}%
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["tableData"],
  data(){
    return {
      mergeArr: ['year'], // 表格中的列名
      mergeObj: {},
    }
  },
  mounted(){
    
  },
  watch: {
    tableData(value){
      console.log('月度经营报表tableData--------------', value)
    }
  },
  computed: {
   
  },
  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        // 合并 year 单元格
        // console.log('处理行row------', row, row.year,row.month)
        if (rowIndex == 0 || row.year != this.tableData[rowIndex - 1].year) {
          const rowspan = this.getRowspan(row.year);
          return { rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      } else if (columnIndex == 1) {
        // 合并 month 单元格
        if (rowIndex === 0 || row.month != this.tableData[rowIndex - 1].month) {
          const rowspan = this.getRowspanByMonth(row.year, row.month);
          return { rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      } else if(columnIndex == 2){
        // 合并 总体进度 单元格
        if (rowIndex == 0 || row.month != this.tableData[rowIndex - 1].month) {
          const rowspan = this.getRowspanByMonth(row.year, row.month);
          return { rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
    getRowspan(year) {
      const count = this.tableData.filter(item => item.year == year).length;
      return count;
    },
    getRowspanByMonth(year, month) {
      const count = this.tableData.filter(item => item.year == year && item.month == month).length;
      return count;
    },
    getRowspanByTotalProgress(year,month){
      const count = this.tableData.filter(item => item.year == year && item.month == month).length;
      return count;
    }
  }
}
</script>

<style>

</style>